<template>
  <view>

    <!-- 左侧的滚动视图区域 -->
    <view class="scroll-view-container" style="">

      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh*0.9 + 'px'}">
        <view class="" style=" padding-top: 70%;"></view>
        <block v-for="(item, i) in categorydata" :key="i">
          <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
            {{ item.name }}
          </view>
        </block>
      </scroll-view>



      <!-- 右侧的滚动视图区域 -->

      <scroll-view class="right-scroll-view" scroll-y :style="{height: wh*0.9 + 'px'}" :scroll-top="scrollTop">
        <view class="" style=" padding-top: 21%;"></view>
        <view class="main-content">
          <!-- 中间 -->
          <view class="main-content_style" v-for=" (item,index1) in  (setmealdata.length>0?setmealdata:dishdata)"
            :key="index1" style="padding-top: 5%;">
            <view class="main-content_image_center" style="display: flex;">

              <image style="width: 80px;height: 80px;" :src="item.image" mode=""></image>
              <view class="main-content_image_center_description" style="padding-left: 10px;">

                <view class="" style="">
                  <h2>{{item.name}}</h2>
                  <p style="font-size: 12px; ;padding-top: 5px;padding-bottom: 5px;width: 350rpx;">{{item.description}}
                  </p>
                  <p style="font-size: 12px;padding-bottom: 5px;">月销量0</p>
                </view>



                <view class="" style=" display: flex;  align-items: center;padding-top: 8%; ">
                  <span style="color: red;font-size: 18px;position: absolute; width: 20px;">￥{{item.price}}</span>

                  <view v-if="item.flavors" class=""
                    style="width:70px;background-color: #fccc48;position: absolute;height: 25px; border-radius: 10px;margin-left: 38%;">
                    <span @click="openpopup(index1)"
                      style=" font-size: 14px;cofont-weight: 550;padding-left: 5px;">选择规格</span>
                  </view>

                  <view v-else class="right-scroll-view_right_box" :style="{'padding-left': wid+'rpx'}">

                    <image style="margin-left: 50rpx;" class="main-content_image2" @click="pluschange(index1)"
                      src="../../static/btn_add.png">
                    </image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

    </view>

    <!-- 口味弹窗-->

    <view class="container">

      <uni-popup ref="flavors" type="popup" style="z-index: 999;position: absolute;">

        <view class="flavorspop" style="background-color: white;">
          <view class="" style="text-align: center;">
            <p style="font-size: 20px; font-weight: 600;padding-top: 30px;"> {{dishdata[index].name}}</p>
          </view>


          <view class="" style=" padding-top:20px;padding-left: 20px;position: absolute;">
            <span style="color: #6a6a6a;">{{dishdata[index].flavors.name}}</span>
          </view>
          <!-- -->
          <view class="" style="display: flex;flex-wrap: nowrap;margin-top: 40px;">
            <view class="center-popup-box" v-for=" (items,i) in flavorsdata" :key="i">

              <view @click="itemchange(i)" :class="['center-popup-item', i === item ? 'item' : '']">{{items}}
              </view>
            </view>

          </view>


          <view class="" style="margin-top: 40px;width: 280px;display: flex;">
            <span style="color: red;font-size: 20px;padding-left: 20px;">￥18</span>
            <view class=""
              style="background-color: orange;width: 100px;height: 35px;line-height: 33px;border-radius: 20px;margin-left:120px;">
              <span @click="addshoppingcart">加入购物车</span>
            </view>
          </view>
        </view>
      </uni-popup>
    </view>



    <!-- 购物车弹窗-->

    <view class="cart" style="">

      <uni-popup ref="cart" type="popup" style="z-index: 999;position: absolute;">
        <view class="" :style="'width:'+cartwid+'px;'+'height:'+ cartwh+'px;'+'background-color:'+ '#FFF;'">
          <view class="" style="padding-top: 3%;padding-left: 4%;  ">
            <view class=""
              style="display: flex;align-items: center;border-bottom:1px solid #f0f0f0;width: 95%;padding-bottom: 10px;">
              <span style="font-size: 20px;font-weight: 600;">购物车</span>
              <image @click="cleanCart" style="width: 16px;height: 16px;padding-left: 66%;"
                src="../../static/clear.png">
                <span style="font-size: 10;color: #bfbfbf;padding-left: 3px;"> 清空</span>
              </image>
            </view>
          </view>


          <view class="" style="padding-left: 10px;padding-top: 15px;border-bottom:1px solid #f0f0f0;         ">
            <scroll-view scroll-y :style="{height: scrollheight + 'px'}" :scroll-top="scrollTop">
              <view class="" style=" align-items: center;padding-bottom: 20px;">


                <view class="" v-for="(item,index) in shoppingcartdata " :key="item.id"
                  style="display: flex;padding-bottom: 20px;padding-left: 12px;">
                  <image style="width:60px;height: 60px;" :src="item.image"></image>
                  <view class="" style="padding-left: 10px;">
                    <span style="font-size: 20px;">{{item.name}}</span>
                    <view style="padding-top: 15px;">
                      <span style="color: red;font-size: 16px;">￥{{item.amount}}</span>
                      <view class="" :style="'margin-left:'+ (shopmargin-10)+'px;'+'margin-top:-20px'">
                        <image class="main-content_image1" style="margin-left: -100rpx;" @click="subchange(index)"
                          src="@/static/btn_red.png">
                        </image>

                        <span style="margin-left: -40rpx;" class="main-content_span">{{item.number}}</span>


                        <image style="" class="main-content_image2" @click="addchange(index)"
                          src="../../static/btn_add.png">
                        </image>
                      </view>

                    </view>

                  </view>
                </view>
              </view>
            </scroll-view>
          </view>


          <!-- 最下面-->

          <view class="footer_header" style="padding-left: 2.5%;margin-top: 2%;">

            <view class="footer_order_bottom " style="width: 90%;">
              <view class="">
                <image style="width: 50px;height: 60px;margin-top: -12%;z-index: 9999;position: absolute;"
                  src="@/static/btn_waiter_sel.png" mode="">

                </image>
                <view class="" style="margin-left:38px;margin-top: -30px;">
                  <span class="circle">{{Total}}</span>
                </view>
              </view>

              <view class="price" style="width: 50px;">
                <span style=" color: white;margin-left: -60px;">￥{{checkedGoodsAmount}}</span>
              </view>
              <view class="footer_order_btn" style="">
                <button @click="gocart" class="footer_orde_btn_sumbit">去结算</button>
              </view>
            </view>

          </view>




        </view>
      </uni-popup>
    </view>


    <!-- 套餐弹窗-->
    <view class="" style="">
      <uni-popup ref="setmeal" type="popup" style="z-index:9999;position: absolute;">
        <view class=""
          :style="'height:'+ wh*0.3 + 'px;'+'width:'+setmealwid+'px;background-color:white;border-radius: 10px;text-align: center;'">


          <scroll-view scroll-y :style="{height: wh*0.3 + 'px'}" :scroll-top="scrollTop">
            <view style="padding-top: 20px; margin-bottom: 10px;">
              <view class="" v-for="(item,index) in 4 " :key="index" style="padding-bottom: 20px;">


                <view style="text-align: start;padding-bottom: 10px;padding-left: 20px;"> <span>精选五常大米</span></view>
                <image style="width: 90%;height: 150px;border-radius: 10px;" src="../../static/bg.png" mode="">
                  <view style="padding-top: 10px;font-size: 20px;font-weight: 600;padding-bottom: 10px;">清蒸鲈鱼X1</view>
                </image>
                <view style="text-align: start;padding-bottom: 10px;padding-left: 20px;"><span>原料：鲈鱼</span></view>
                <view style="text-align: start;color: red;font-size: 20px;padding-left: 20px;"><span>￥ 80</span></view>
              </view>
            </view>
          </scroll-view>

        </view>
      </uni-popup>
    </view>




  </view>
</template>

<script>
  import Bus from '@/utils/EventBus.js'
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  import {
    categroylist,

    dishlist
  } from '@/api/category.js'
  import {
    setmeallist
  } from '@/api/setmeal.js'

  import {
    addshopcart,
    getcount,
    cleancart,
    queryshopcart
  } from '@/api/shopcart.js'
  export default {
    /* name: "my-scroll", */

    data() {
      return {
        wh: 0,
        wid: 0,
        categorydata: [],
        active: 0,
        item: 0,
        //购物车
        flavorsValue: '',
        dishId: '',
        setmealId: '',
        flavordId: '',
        shoppingcartdata: '',
        dishdata: '',
        flavorsdata: '',
        setmealdata: '',
        // 滚动条距离顶部的距离
        scrollTop: 0,
        total: 0,
        isloading: false,
        index: 0,
        categoryId: 0,
        //购物车
        cartwh: 0,
        cartwid: 0,
        cartmargin: 0,
        scrollheight: 0,
        //套餐弹窗
        setmealwid: 0,
        shopmargin: 0,
        isshow: false,
        message: '',
      };
    },
    computed: {
      // 将 m_cart 模块中的 cart 数组映射到当前页面中使用

      ...mapGetters('m_cart', ['Total', 'checkedGoodsAmount']),

    },
    watch: {
      message(newcode, oldcode) {
        if (newcode = true) {
          this.getcategorylist()
        }
      },
    },

    created() {
      Bus.$on('refresh', (message) => {
        console.log(message, "busmessage")
      })
      const sysInfo = uni.getWindowInfo()
      // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
      this.wh = sysInfo.windowHeight - 50
      this.wid = sysInfo.windowWidth / 2 + 10
      this.cartwh = sysInfo.windowHeight / 2.2
      this.cartwid = sysInfo.windowWidth
      this.cartmargin = sysInfo.windowWidth / 1.8
      this.scrollheight = sysInfo.windowHeight / 3.2
      this.setmealwid = sysInfo.windowWidth * 0.8
      this.shopmargin = sysInfo.windowWidth / 1.5
      this.getcategorylist()
    },
    beforeDestroy() {
      Bus.$off('refresh')
    },
    //触底的事件
    onReachBottom() {
      if (this.isloading) return
    },
    //监听active数据
    /* watch: {
      // 监听message数据的变化
      active(newVal, oldVal) {
        console.log(newVal, "newVal")
        console.log(oldVal, "oldVal")
        // 你可以在这里根据新的值进行相应的操作
  }
    }, */

    methods: {
      ...mapMutations('m_cart', ['updateshopcart']),



      openpopup(index1) {
        //开启口味弹窗

        this.flavordId = index1
        this.flavorsdata = this.dishdata[index1].flavors.value.split(",");

        this.$refs.flavors.open("center")
      },



      //分类表
      async getcategorylist() {
        this.isloading = true
        const res = await categroylist("")

        this.categorydata = res.data


        this.categoryId = res.data[0].id
        this.getdish(res.data[0].id)

        this.isloading = false
      },
      //菜品表
      async getdish(categoryId) {

        this.isloading = true
        const res = await dishlist(categoryId)
        this.dishdata = res.data

        this.isloading = false

      },

      //套餐表
      async getsetmeal(categoryId) {

        const res = await setmeallist(categoryId)
        this.setmealdata = res.data

      },


      activeChanged(i) {

        this.active = i
        const categoryId = this.categorydata[i].id


        this.getdish(categoryId)

        this.getsetmeal(categoryId)
        // 让 scrollTop 的值在 0 与 1 之间切换
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      //删除单个菜品
      async subchange(index) {

        if (this.shoppingcartdata.length > 0) {
          if (this.shoppingcartdata[index].number >= 1) {
            this.total = this.shoppingcartdata[index].number - 1
            const id = this.shoppingcartdata[index].id
            await getcount(this.total, id)
            console.log(this.total, "this.total")
          }
        }
        this.queryshoppingcart()
      },
      //添加商品
      async addchange(index) {

        if (this.shoppingcartdata.length > 0) {
          this.total = this.shoppingcartdata[index].number + 1
          const id = this.shoppingcartdata[index].id
          await getcount(this.total, id)
          console.log(this.total, "this.total")
        }
        this.queryshoppingcart()

      },

      //清空购物车
      async cleanCart() {

        uni.removeStorageSync("cart")
        const res = await cleancart()
        if (res.data === 'ok') {
          uni.showToast({
            title: "数据删除成功！",
            duration: 2000,
            position: 200,

          })
        }
        this.queryshoppingcart()
        this.shoppingcartdata = res.data



      },
      //查询购物车
      async queryshoppingcart() {
        const res = await queryshopcart()

        //  console.log(res.data, "购物车数据")
        this.shoppingcartdata = res.data
        this.updateshopcart(this.shoppingcartdata) //保存购物车数据


      },
      //加入购物车
      async addshoppingcart() {
        //菜品或套餐索引

        if (this.setmealdata.length > 0) {
          this.setmealId = this.setmealdata[this.flavordId].id
        } else {
          this.dishId = this.dishdata[this.flavordId].id
        }

        const addcart = {
          dishId: this.dishId,
          setmealId: this.setmealId,
          dishFlavor: this.flavorsValue
        }
        await addshopcart(addcart)
        //查询购物车
        this.queryshoppingcart()
        this.$refs.cart.open("bottom")
      },

      //打开购物车
      async pluschange(index1) {
        this.index = index1 //菜品或套餐索引


        if (this.setmealdata.length > 0) {
          this.setmealId = this.setmealdata[index1].id
        } else {
          this.dishId = this.dishdata[index1].id
        }
        const addcart = {
          dishId: this.dishId,
          setmealId: this.setmealId,
          dishFlavor: this.flavorsValue
        }

        await addshopcart(addcart) //添加购物车
        //查询购物车
        this.queryshoppingcart()
        this.$refs.cart.open("bottom")


      },
      //口味选择
      itemchange(i) {

        this.item = i
        this.flavorsValue = this.flavorsdata[i]
        console.log(this.flavorsdata[i], "item")
        this.flavorsValue = this.flavorsdata[i]

      },

      gocart() {
        uni.navigateTo({
          url: '/pages/order/order'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .scroll-view-container {
    /* z-index: -1;
    position: absolute; */

    display: flex;
    background-color: #FFFFFF;
  }

  .left-scroll-view {
    width: 30%;

    background-color: #F7F7F7;

  }

  .right-scroll-view {
    padding-left: 20px;

  }

  .left-scroll-view-item {
    background-color: #F7F7F7;
    line-height: 60px;
    text-align: center;
    font-size: 14px;


    &.active {
      position: relative;
      background-color: #FFFFFF;

      &::before {
        content: ' ';
        display: block;
        width: 3px;
        height: 30px;
        background-color: #C00000;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }

  //右边导航页面
  .main-content_image1 {

    width: 30px;
    height: 30px;
    position: absolute;
  }

  .main-content_span {
    padding: 4px;

    position: absolute;
  }

  .main-content_image2 {
    width: 30px;
    height: 30px;
    position: absolute;

  }


  .right-scroll-view_right_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 25%;
  }


  //口味弹窗
  .flavorspop {
    width: 320px;
    height: 240px;
    border-radius: 10px;
    text-align: center;
  }

  .center-popup-box {

    margin-top: 10px;
    margin-left: 20px;
    width: 80px;
    height: 40px;

    .center-popup-item {

      line-height: 30px;


      border: 1px solid #facb47;

      //
      &.item {
        /* 
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px; */


        position: relative;
        background-color: orange;

      }
    }
  }


  //购物车
  .footer_header {

    //
  }

  // 修改点击时的样式
  .button-hover {
    // color: #F85959;

    background-color: #e2e2e2;
  }

  // 最下面


  .footer_order_bottom {
    display: flex;
    justify-items: center;
    align-items: center;

    z-index: 200;
    position: absolute;
    display: flex;
    background-color: #2c2c2c;

    border-radius: 20px;
    padding-left: 20px;
    color: white;

  }

  .footer_orde_btn_sumbit {
    //
    border: none;
    height: 38px;
    width: 100px;
    line-height: 35px;
    border-radius: 20px;
    background-color: #facb47;
  }

  .footer_order_btn {
    padding-top: 2px;
    padding-left: 19.5%;
    height: 40px;
    width: 100px;



  }

  .price {
    padding-left: 20%;
  }

  // 红心圆圈
  .circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    line-height: 20px;
    /* 圆形 */
    color: white;
    text-align: center;

    /* 使数字垂直居中 */
    font-size: 14px;

  }
</style>